<template>
	<div>
		<div class="main main-player">
			<!-- 返回 和 歌词 名称 -->
			<div class="backAname flexRow">
				<div class="back" @click="goOff"></div>
				<div class="Songname">{{this.$route.query.name}}</div>
			</div>
			<!-- playericon -->
			<div class="playericon">
				<img class="playericon-img" :src="this.$route.query.imgurl" />
			</div>
			<!-- 歌词 -->
			<div class="lyric">
                <LRC :id="this.$route.query.id" :Currentime="current"></LRC>
			</div>
			<!-- 进度条 -->
			<div class="progess">
				<el-progress :percentage="ProgeStatus" :format="format"></el-progress>
			</div>
			<!-- 歌曲时长 -->
			<div v-if="SongsAllTime" class="SongTime flexRow">
				<div class="STleft">00:00:00</div>
				<div class="STright">{{transformTime(SongsAllTime)}}</div>
			</div>
			<!-- 播放按钮 -->
			<div class="playerItem flexRow">
				<!-- 循环 -->
				<div class="cicle"></div>
				<!-- 上一曲 -->
				<div class="lastSong"></div>
				<!-- 播放暂停 -->
				<div class="bofang" :class="isplay ? 'play' : 'pause' " @click="Isplay">

				</div>
				<!-- 下一曲 -->
				<div class="nextSong"></div>
				<!-- 加入喜欢 -->
				<div class="love"> </div>
			</div>
		</div>
		<!-- 添加播放 -->
		<video ref="player" :src="SongsUrl" poster="mymovie.jpg" width="300" height="200">
			Video player not available.
		</video>

	</div>
</template>

<script>
	import LRC from './Lyric'
	export default {
		
		name: "",
		components:{
			LRC
		},
		data() {
			return {
				SongsUrl: '',
				isplay: true,
				current: 0,

				SongsAllTime: null,

				ProgeStatus: 0

			}
		},
		created() {

		},
		mounted() {
			//获取音乐地址
			this.getSongUrl()


		},
		watch: {
			// current(c) {
			// 	console.log(c)
			// }
		},
		methods: {
			//返回上一页
			goOff() {
				this.$router.go(-1);
			},
			//进度条显示文本
			format() {
				return ''

			},
			//获取歌曲播放地址
			async getSongUrl() {
				const {
					data: res
				} = await this.$http.get('/song/url', {
					params: {
						id: this.$route.query.id
					}
				})
				// console.log(res)
				if (res.code !== 200) {
					this.$message.error('获取失败')
				} else {
					this.SongsUrl = res.data[0].url

				}

			},
			//获取歌曲时长
			getduration() {
				var myplayer = this.$refs.player;

				this.SongsAllTime = myplayer.duration
				// console.log(this.SongsAllTime)
			},
			//转化歌曲总时间为 00：00：00
			transformTime(time) {

				const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)
				const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
				const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
				return hour + ':' + min + ':' + sec
			},

			//加载函数 获取歌词时间
			currentTimeHandle() {

				var currenTime = this.$refs.player.currentTime
                this.current = currenTime
				this.ProgeStatus = parseInt((currenTime / this.SongsAllTime) * 100)
				// console.log(this.ProgeStatus)
			},
			//获取音频的播放时间
			addEventHandle() {
				this.$refs.player.addEventListener("timeupdate", this.currentTimeHandle)
				// console.log(this.$refs.playeR)

			},
			//销毁音频的播放时间函数
			removeEventHandle() {
				this.$refs.player.removeEventListener("timeupdate", this.currentTimeHandle)
			},
			Isplay() {
				var player = this.$refs.player
				//将播放时间绑定

				if (player.paused) {
					player.play()
					this.isplay = false
					this.addEventHandle()
					//播放开始获取时长
					this.getduration()
				} else {
					player.pause()
					this.isplay = true
					this.removeEventHandle()
				}

			}
		}
	}
</script>

<style>
	.el-progress {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.play {
		background-image: url(img/play.png);
	}

	.pause {
		background-image: url(img/pause.png);
	}

	.love {

		z-index: 17;
		width: 20px;
		height: 16px;
		margin: 13px 0 0 64px;
		background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pseuk8b1wvk4rmhn6z9dt1jey52h4z3h6fe1eaeba-7a70-4922-bc74-f4a3893a1577);
	}

	.nextSong {
		z-index: 16;
		width: 21px;
		height: 22px;
		margin: 10px 0 0 29px;
		background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psagn8b4ju3w8qqaryrvaklia9wefjqg1kj8e47ee93-8d7f-480c-a230-9e6c35f1f838);
	}

	.bofang {
		z-index: 13;
		width: 43px;
		height: 42px;
		margin-left: 29px;


	}

	.lastSong {
		z-index: 14;
		width: 21px;
		height: 22px;
		margin: 10px 0 0 58px;
		background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psika5ael8rgibc1p9gj3shd7qwsdkcxzwd8cb7e9d5-fe8e-43d7-9e38-58984fed4dad);
	}

	.cicle {
		z-index: 15;
		width: 22px;
		height: 15px;
		margin-top: 14px;
		background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psytogoel96oo534qs681mygdor14b2c00da4aef-d91a-48fb-bc46-95ebf6e6681c);
	}

	.playerItem {

		z-index: auto;
		width: 307px;
		height: 42px;
		margin: 24px auto 0 auto;
	}

	.SongTime {
		font-weight: 700;
		font-size: smaller;
		z-index: auto;
		width: 355px;
		height: 12px;
		justify-content: space-between;
		margin: 13px auto 0 auto;
	}

	.STleft,
	.STright {

		z-index: 11;
		width: 60px;
		height: 20px;
	}

	.progess {

		z-index: auto;
		width: 323px;
		height: 17px;
		margin: 0 auto 0 auto;

	}

	.lyric {

		z-index: auto;
		width: 217px;
		height: 100px;
		margin: 14px auto ;
	}

	.playericon-img {
		border-radius: 50%;
		overflow: hidden;
	}

	.playericon {


		margin: 37px auto 0 auto;
		z-index: 8;
		width: 261px;
		height: 259px;
		background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psfedem2omk5fo7qrongpnugl6sy2i5znw3814ef97-30f9-4d70-b975-a1b67ac5092d);
	}

	.Songname {
		font-weight: bold;
		font-size: large;
		color: white;
		z-index: 6;
		width: 170px;
		height: 20px;
		text-align: center;

	}

	.back {
		z-index: 5;
		width: 10px;
		height: 16px;
		background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psck5skxlwy7hqfn4muwf3qj3lgcmwxjm90a3bd42-608a-4583-ad71-47c3b78ae525);
	}

	.backAname {

		z-index: auto;
		width: 261px;
		height: 20px;
		justify-content: space-between;
		margin: 10px 0 0 12px;
	}

	.main-player {
		border: 1px solid transparent;

		z-index: 4;
		height: 667px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pst1mruzcd95i47x4a4tljh3i1oi2mqnvkde2ef73e-392e-4ff8-a42c-3daaecd41549) 100% no-repeat;
		width: 375px;
		margin: 15px auto;

	}
</style>
